<template>
    <div class="root">
      <el-header class="nav">
        <div class="nav__container">
          <div class="nav__content">
            <div class="nav__left">
              <div class="nav__logo">LearnPro</div>
              <el-menu mode="horizontal" :ellipsis="false" class="nav__menu">
                <RouterLink to="/"><el-menu-item index="1">首页</el-menu-item></RouterLink>
              <RouterLink to="/honor"><el-menu-item index="2">荣誉</el-menu-item></RouterLink>
              <RouterLink to="/study"><el-menu-item index="3">学习之路</el-menu-item></RouterLink>
              <RouterLink to="/about"><el-menu-item index="4">关于我们</el-menu-item></RouterLink>
              </el-menu>
            </div>
            <div class="nav__right">
              <el-input
                v-model="searchText"
                placeholder="搜索课程"
                class="w-64"
                :prefix-icon="Search"
              />
              <RouterLink to="/login"><el-button type="primary" class="!rounded-button whitespace-nowrap">登录</el-button></RouterLink>
              <RouterLink to="/register/student"><el-button type="success" class="!rounded-button whitespace-nowrap">注册</el-button></RouterLink>
            </div>
          </div>
        </div>
      </el-header>
    
    <div class="app">
<!-- Hero Section -->
<div class="hero">
<img src="https://ai-public.mastergo.com/ai/img_res/0b455df978ec65b48aeae8d43f1652a1.jpg"
class="hero-background" alt="hero background" />
<div class="hero-overlay">
<div class="container">
<div class="hero-content">
<h1>关于我们</h1>
<p class="subtitle">专注软件测试服务 打造卓越品质</p>
<p class="description">
深圳市智测云科技有限公司成立于 2018 年，是一家专注于软件测试服务的技术公司。我们拥有经验丰富的专业测试团队，为客户提供全方位的软件质量保障解决方案。
</p>
<p class="description">
凭借多年的行业经验和技术积累，我们已经为超过 200 家企业提供了优质的测试服务，涵盖金融、电商、教育、医疗等多个领域。我们始终坚持"专业、严谨、创新"的服务理念，致力于帮助客户打造高质量的软件产品。
</p>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<div class="features">
<div class="container">
<div class="features-grid">
<div class="feature-card">
<div class="feature-image-wrapper">
<img src="https://ai-public.mastergo.com/ai/img_res/91937277bf2840671a7705191755f70e.jpg"
class="feature-image" alt="专业服务" />
</div>
<div class="feature-content">
<h3>专业服务</h3>
<p>提供全方位软件测试解决方案，确保产品质量</p>
</div>
</div>
<div class="feature-card">
<div class="feature-image-wrapper">
<img src="https://ai-public.mastergo.com/ai/img_res/58a8070a92c775cdf4f69649066a6201.jpg"
class="feature-image" alt="技术创新" />
</div>
<div class="feature-content">
<h3>技术创新</h3>
<p>持续创新测试技术，提升服务效率与质量</p>
</div>
</div>
<div class="feature-card">
<div class="feature-image-wrapper">
<img src="https://ai-public.mastergo.com/ai/img_res/e4b127e87bb8626ac77c7d46fe241693.jpg"
class="feature-image" alt="优质服务" />
</div>
<div class="feature-content">
<h3>优质服务</h3>
<p>专业团队提供 7*24 小时技术支持服务</p>
</div>
</div>
</div>
</div>
</div>
<!-- Contact Section -->
<div class="contact">
<div class="container">
<h2>联系我们</h2>
<div class="contact-grid">
<div class="contact-item">
<div class="contact-icon">
<el-icon><Phone /></el-icon>
</div>
<p>400-888-9999</p>
</div>
<div class="contact-item">
<div class="contact-icon">
<el-icon><Message /></el-icon>
</div>
<p>contact@smarttest.com</p>
</div>
<div class="contact-item">
<div class="contact-icon">
<el-icon><Location /></el-icon>
</div>
<p>深圳市南山区科技园南区科苑路 88 号</p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>© 2025 软件测试工作室. 保留所有权利。</p>
</div>
</footer>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { Phone, Message, Location } from '@element-plus/icons-vue';
const searchText = ref('');
</script>
<style scoped>
.root {
  min-height: 100vh;
  background-color: #fff;
}
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 0;
}
.nav__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}
.nav__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4rem;
}
.nav__left {
  display: flex;
  align-items: center;
}
.nav__logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #2563eb;
  margin-right: 2.5rem;
}
.nav__menu {
  border-bottom: none;
}
.nav__right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.app {
min-height: 100vh;
background-color: #fff;
padding-top: 4rem; /* 添加这行代码，确保内容不会被导航栏遮挡 */
}

.container {
max-width: 1440px;
margin: 0 auto;
padding: 0 24px;
}

.hero {
position: relative;
height: 600px;
overflow: hidden;
}

.hero-background {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.9), transparent);
}

.hero-content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 42rem;
}

.hero-content h1 {
font-size: 2.25rem;
font-weight: bold;
margin-bottom: 1rem;
}

.hero-content .subtitle {
font-size: 1.25rem;
color: #4B5563;
margin-bottom: 2rem;
}

.hero-content .description {
color: #374151;
line-height: 1.625;
margin-bottom: 1.5rem;
}

.features {
padding: 5rem 0;
background-color: #F9FAFB;
}

.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}

.feature-card {
background-color: #fff;
border-radius: 0.5rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
overflow: hidden;
}

.feature-image-wrapper {
height: 12rem;
overflow: hidden;
}

.feature-image {
width: 100%;
height: 100%;
object-fit: cover;
}

.feature-content {
padding: 1.5rem;
}

.feature-content h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.75rem;
}

.feature-content p {
color: #4B5563;
}

.contact {
padding: 4rem 0;
background-color: #fff;
}

.contact h2 {
font-size: 1.5rem;
font-weight: 600;
text-align: center;
margin-bottom: 3rem;
}

.contact-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: 56rem;
margin: 0 auto;
}

.contact-item {
text-align: center;
}

.contact-icon {
width: 3rem;
height: 3rem;
background-color: #EBF5FF;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
}

.contact-icon .el-icon {
font-size: 1.25rem;
color: #2563EB;
}

.contact-item p {
color: #4B5563;
}

.footer {
padding: 2rem 0;
background-color: #F9FAFB;
text-align: center;
}

.footer p {
color: #6B7280;
}
</style>